<template>
  <view class="sports-plan">
    <rich-text :nodes="sportsPlan.summary" />
    <view class="sports-recommends">
      <plain-card
        v-for="(content, index) in sportsRecommendContents"
        :key="index"
      >
        <template v-slot:icon>
          <view class="icon-sports-plan" />
        </template>
        <template v-slot:title>
          <text>运动推荐</text>
        </template>
        <template v-slot:content>
          <sports-plan-card-content
            :sports-explain="content.sportsExplain"
            :sports-number="content.sportsGroup"
            :sports-number-explain="content.sportsGroupExplain"
            :sports-url="content.sportsImageUrl"
          />
        </template>
      </plain-card>
    </view>
    <button open-type="contact" class="button-plain-purple">联系健管科学运动</button>
  </view>
</template>

<script>
import PlainCard from "../components/plain-card.vue";
import SportsPlanCardContent from "./components/sports-plan-card-content.vue";
import heartImage from "../../../../../assets/images/data-heart.svg";
export default {
  components: {
    plainCard: PlainCard,
    sportsPlanCardContent: SportsPlanCardContent
  },
  props: {
    sportsPlan: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
    };
  },
  computed: {
    sportsRecommendContents() {
      return this.sportsPlan.sportsRecommendContents
    }
  }
};
</script>

<style lang="less">
@import "./index.less";
</style>
